<template>
  <div class="interview-container">
    <a-row class="header">
      <a-col :span="24">
        <h1>前端面试题库</h1>
        <a-radio-group v-model:value="currentCategory" class="category-filter">
          <a-radio-button v-for="category in categories" :key="category.key" :value="category.key">
            {{ category.name }}
          </a-radio-button>
        </a-radio-group>
      </a-col>
    </a-row>

    <a-row class="content">
      <a-col :span="24">
        <a-collapse v-model:activeKey="activeKeys">
          <a-collapse-panel 
            v-for="question in filteredQuestions" 
            :key="question.id" 
            :header="question.title"
          >
            <div class="question-content">
              <div class="difficulty" :class="question.difficulty">
                难度: {{ question.difficulty }}
              </div>
              <div class="description">{{ question.description }}</div>
              
              <div v-if="question.code" class="code-block">
                <pre><code>{{ question.code }}</code></pre>
              </div>

              <div class="answer" v-if="showAnswer[question.id]">
                <h4>答案解析：</h4>
                <p>{{ question.answer }}</p>
              </div>

              <a-button 
                type="primary" 
                @click="toggleAnswer(question.id)"
                class="show-answer-btn"
              >
                {{ showAnswer[question.id] ? '隐藏答案' : '查看答案' }}
              </a-button>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const currentCategory = ref('js');
const activeKeys = ref<string[]>([]);
const showAnswer = ref<Record<string, boolean>>({});

const categories = [
  { key: 'js', name: 'JavaScript基础' },
  { key: 'vue', name: 'Vue专题' },
  { key: 'performance', name: '性能优化' },
  { key: 'algorithm', name: '算法思维' },
  { key: 'engineering', name: '工程化' },
];

const questions = [
  {
    id: '1',
    category: 'js',
    title: '解释事件循环(Event Loop)机制',
    difficulty: '中等',
    description: '请详细说明 JavaScript 中的事件循环机制，包括宏任务、微任务的执行顺序。',
    code: `console.log('1');
Promise.resolve().then(() => console.log('2'));
setTimeout(() => console.log('3'), 0);
console.log('4');
// 输出顺序是什么？为什么？`,
    answer: '输出顺序是: 1, 4, 2, 3。因为：\n1. 同步代码先执行，打印 1, 4\n2. Promise.then 是微任务，在当前宏任务结束后立即执行，打印 2\n3. setTimeout 是宏任务，在下一个事件循环才执行，打印 3',
  },
  {
    id: '2',
    category: 'vue',
    title: 'Vue3 响应式原理',
    difficulty: '困难',
    description: '请解释 Vue3 中的响应式系统是如何工作的，以及与 Vue2 的区别。',
    answer: 'Vue3 使用 Proxy 替代了 Vue2 的 Object.defineProperty，主要优势：\n1. 可以监听数组变化\n2. 可以监听对象属性的添加和删除\n3. 不需要递归遍历对象的所有属性\n4. 性能更好，且支持更多数据格式',
  },
  {
    id: '3',
    category: 'performance',
    title: '前端性能优化策略',
    difficulty: '中等',
    description: '列举并解释常见的前端性能优化方法。',
    answer: '主要优化策略：\n1. 资源压缩与合并\n2. 懒加载与预加载\n3. 使用 CDN\n4. 缓存策略优化\n5. 减少 HTTP 请求\n6. 优化关键渲染路径\n7. 使用 Web Workers 处理密集计算',
  },
  {
    id: '4',
    category: 'algorithm',
    title: '实现防抖(Debounce)函数',
    difficulty: '中等',
    description: '请实现一个防抖函数，并解释其应用场景。',
    code: `function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}`,
    answer: '防抖函数用于限制函数的执行频率，常用于输入搜索、窗口调整等场景。原理是在delay时间内，如果再次触发，则重新计时。只有在指定时间内没有再次触发，才会执行函数。',
  },
  {
    id: '5',
    category: 'engineering',
    title: '现代前端工程化实践',
    difficulty: '困难',
    description: '讨论现代前端工程化涉及的主要方面和最佳实践。',
    answer: '现代前端工程化主要包括：\n1. 模块化开发（ES Modules）\n2. 包管理（npm/yarn/pnpm）\n3. 构建工具（Webpack/Vite）\n4. 代码规范（ESLint/Prettier）\n5. CI/CD 流程\n6. 自动化测试\n7. 性能监控与优化',
  }
];

const filteredQuestions = computed(() => {
  return questions.filter(q => q.category === currentCategory.value);
});

const toggleAnswer = (questionId: string) => {
  showAnswer.value[questionId] = !showAnswer.value[questionId];
};
</script>

<style scoped>
.interview-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  margin-bottom: 24px;
  text-align: center;
}

.header h1 {
  margin-bottom: 20px;
  color: #2c3e50;
}

.category-filter {
  margin-bottom: 20px;
}

.question-content {
  padding: 16px;
}

.difficulty {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 14px;
}

.difficulty.简单 {
  background-color: #e6f7ff;
  color: #1890ff;
}

.difficulty.中等 {
  background-color: #fff7e6;
  color: #fa8c16;
}

.difficulty.困难 {
  background-color: #fff1f0;
  color: #f5222d;
}

.code-block {
  background-color: #f5f5f5;
  padding: 16px;
  border-radius: 4px;
  margin: 16px 0;
}

.code-block pre {
  margin: 0;
  white-space: pre-wrap;
}

.answer {
  margin-top: 16px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.show-answer-btn {
  margin-top: 16px;
}

.description {
  color: #666;
  margin-bottom: 16px;
}
</style> 